@extends('layouts.back_stage')
@section('content')
  <style>
  /* .container{margin-top:30px} */
  #app{padding:20px}
  .right-f{float:right;} 
  .ingred_sel{width:200px;margin:0 30px 0 10px} 
  .type_x{margin:40px 20px 5px 10px } 
  .updata{font-size:10px;color:#409eff}
  .pation{text-align:center}
  .table_margin{padding:10px;background:#fff;text-align:content;margin-top:10px}
  .look_margin{margin:20px 0}
  .caser{width:300px}
  </style>
  <div class="container">
        <div class="page-body" id="app"> 
              <div class="type_x">
                      <label>名称</label>
                          <el-input  class="ingred_sel"  id="namex" v-model="input.name" size="small" placeholder="请输入名称"></el-input>
                      <label>手机号</label>
                         <el-input  class="ingred_sel on" id="telx" v-model="input.tel"  size="small" placeholder="请输入完整手机号码"></el-input>
                         <el-button  class="but-left"  size="small" @click="onGet" type="primary">查询 </el-button>
                      <span class="right-f">
                            <el-button type="primary"  size="small"   @click="added" >添加</el-button>
                            <el-button type="primary"  size="small"   @click="audit">审核</el-button>        
                            <el-button type="primary"  size="small"   @click="reverify">反审</el-button>
                            <el-button type="primary"  size="small"   @click="expost">导出</el-button>
                      </span>
                 </div>
                 <div class="table_margin">
                 <template>
                      <el-table
                        :data="tableData"
                        border size="small"
                        @filter-change="filterTag"
                        @selection-change="handleSelectionChange"
                        style="width: 100%">
                        <el-table-column  type="selection"  width="50"></el-table-column>
                        <el-table-column prop="loop" label="序号"  width="50"> </el-table-column>
                        <el-table-column  prop="jigou" label="所属机构" width="120"></el-table-column>
                        <el-table-column 
                          prop="type"
                          label="类型"
                          width="100"
                          column-key="type"
                          :filters="[{ text: '分公司', value: '1' }, { text: '代理商', value: '2' }]">
                          <template slot-scope="scope">
                             <span v-if="scope.row.type===1">分公司</span>
                             <span v-if="scope.row.type===2">代理商</span>  
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="供应商名称"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          prop="contacts"
                          label="联系人"
                          width="100">
                        </el-table-column>
                        <el-table-column
                          prop="tel"
                          label="手机号码"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          prop="address"
                          label="地址"
                          width="200"
                         >
                        </el-table-column>
                        <el-table-column
                      prop="verify_user"
                      label="审核人"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="verified_at"
                      label="审核时间"
                      width="140"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="admin_a"
                      label="录入人"
                      width="100">
                    </el-table-column>
                    <el-table-column
                        prop="created_at"
                        label="录入时间"
                        width="140"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      label="状态"
                      width="100"
                      column-key="status"
                      :filters="[{ text: '启用未审核', value: '1' }, { text: '启用已审核', value: '2' },{text: '停用未审核', value: '11'},{text: '停用已审核', value: '12'}]"
                      >
                      <template slot-scope="scope">
                        <span v-if="scope.row.status===1">启用未审核</span>
                        <span v-if="scope.row.status===2">启用已审核</span>
                        <span v-if="scope.row.status===11">停用未审核</span>
                        <span v-if="scope.row.status===12">停用已审核</span>
                      </template>
                      </el-table-column>
                        <el-table-column
                          fixed="right"
                          label="操作"
                          width="120">
                          <template slot-scope="scope" > 
                        <template>
                            <a v-if="scope.row.status===11 ||scope.row.status===12"  @click="deleteRow($event)" class="updata">使用</a>
                            <a v-if="scope.row.status===1 || scope.row.status===2" @click="deleteRow($event)" class="updata" >停用</a>
                        </template>
                            <el-button  type="text" size="small" @click="updataDis(scope)">修改</el-button>
                            <el-button type="text" size="small" @click="lookDis(scope)">查看</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                   </div> 
                  <div class="pation">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      @current-change="handleCurrentChange"
                      :total="total">
                    </el-pagination>
                 </div>
                 <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="50%"
                      :before-close="handleClosea">
                        <span>
                            <el-form ref="form" :model="updateForm" label-width="80px">
                            <div class="look_margin">
                            <label>所属机构 :</label>
                              <!-- <el-select   v-model="updateForm.pid"  size="small" >
                              <el-option  ></el-option>
                            </el-select> -->
                            <select class="ingred_sel two" v-model="updateForm.pid" name="supplier">
                              <option value="">请选择</option>  
                              <option value="1">大品文化</option>                                      
                              <option value="2">杭州分公司</option>
                              <option value="3">河南分公司</option>                                                                           
                            </select> 

                          <label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型:</label>
                            <select class="ingred_sel one"  v-model="updateForm.type" name="supplier">
                                  <option value="">请选择</option>  
                                  <option value="1">代理商</option>                                      
                                  <option value="2">分公司</option>
                                  <option value="3">客户</option>                                                                          
                                </select>
                            </div> 
                            <div class="look_margin"> 
                            <label> &nbsp;&nbsp;&nbsp;&nbsp;名称:</label>
                              <el-input  class="ingred_sel" v-model="updateForm.name" size="small"></el-input>
                              <label>&nbsp;&nbsp;手机号:</label>
                              <el-input  class="ingred_sel"  v-model="updateForm.tel" size="small"></el-input>
                              </div>
                            <div class="look_margin"> 
                                <label> &nbsp;&nbsp;省市区:&nbsp;&nbsp;</label>
                                  <el-cascader
                                     size="small"
                                     class='caser'
                                     :placeholder="pleader"
                                    :options="options"
                                    v-model="updateForm.area_bh"
                                    @focus="handleChange">
                                  </el-cascader>
                                  </div>
                            <div class="look_margin">
                              <label>&nbsp;详细地址:</label>
                              <el-input  class="caser" v-model="updateForm.address" size="small"></el-input>
                            </div>
                            <div class="look_margin">
                              <label>&nbsp;银行账号:</label>
                              <el-input  class="caser" v-model="updateForm.bank_account" size="small"></el-input>
                            </div>
                            <div class="look_margin">
                              <label>合同时间:&nbsp;</label>
                              <el-date-picker
                              v-model="updateForm.start"
                                type="datetime"
                                size="small"
                                value-format="yyyy-MM-dd hh:mm:ss"
                                placeholder="选择日期时间">
                              </el-date-picker>
                        </div>
                        <div class="look_margin">
                              <label>结束时间:&nbsp;</label>
                              <el-date-picker
                              v-model="updateForm.end"
                                type="datetime"
                                size="small"
                                value-format="yyyy-MM-dd hh:mm:ss"
                                placeholder="选择日期时间"
                              >
                              </el-date-picker>
                             </div>

                              <el-form-item>
                                <el-button type="primary"  @click="UpdataSubmit">确认修改</el-button>
                                <el-button @click="dialogVisible=false">取消</el-button>
                              </el-form-item>
                             </el-form>
                          </span>
                    </el-dialog>

                    <el-dialog
                      title="提示"
                      :visible.sync="lookVisible"
                      width="50%"
                      :before-close="handleClose">
                        <span>
                            <el-form ref="form" :model="updateForm" label-width="80px">
                            <div class="look_margin">
                            <label>所属机构 :</label>
                              <!-- <el-select   v-model="updateForm.pid"  size="small" >
                              <el-option  ></el-option>
                            </el-select> -->
                            <select class="ingred_sel two" disabled v-model="updateForm.pid" name="supplier">
                              <option value="">请选择</option>  
                              <option value="1">大品文化</option>                                      
                              <option value="2">杭州分公司</option>
                              <option value="3">河南分公司</option>                                                                           
                            </select> 

                          <label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型:</label>
                            <select class="ingred_sel one"  disabled v-model="updateForm.type" name="supplier">
                                  <option value="">请选择</option>  
                                  <option value="1">代理商</option>                                      
                                  <option value="2">分公司</option>
                                  <option value="3">客户</option>                                                                          
                                </select>
                            </div> 
                            <div class="look_margin"> 
                            <label> &nbsp;&nbsp;&nbsp;&nbsp;名称:</label>
                              <el-input  class="ingred_sel" disabled v-model="updateForm.name" size="small"></el-input>
                              <label>&nbsp;&nbsp;手机号:</label>
                              <el-input  class="ingred_sel"  disabled v-model="updateForm.tel" size="small"></el-input>
                              </div>
                            <div class="look_margin"> 
                                <label> &nbsp;&nbsp;省市区:&nbsp;&nbsp;</label>
                                  <el-cascader
                                     size="small"
                                     class='caser'
                                     disabled
                                     :placeholder="pleader"
                                    :options="options"
                                    v-model="updateForm.area_bh"
                                    @focus="handleChange">
                                  </el-cascader>
                                  </div>
                            <div class="look_margin">
                              <label>&nbsp;详细地址:</label>
                              <el-input  class="caser"  disabled v-model="updateForm.address" size="small"></el-input>
                            </div>
                            <div class="look_margin">
                              <label>&nbsp;银行账号:</label>
                              <el-input  class="caser"  disabled v-model="updateForm.bank_account" size="small"></el-input>
                            </div>
                            <div class="look_margin">
                              <label>合同时间:&nbsp;</label>
                              <el-date-picker
                              v-model="updateForm.start"
                                type="datetime"
                                size="small"
                                disabled
                                value-format="yyyy-MM-dd hh:mm:ss"
                                placeholder="选择日期时间">
                              </el-date-picker>
                        </div>
                        <div class="look_margin">
                              <label>结束时间:&nbsp;</label>
                              <el-date-picker
                              v-model="updateForm.end"
                                type="datetime"
                                size="small"
                                disabled
                                value-format="yyyy-MM-dd hh:mm:ss"
                                placeholder="选择日期时间"
                              >
                              </el-date-picker>
                             </div>

                            
                             </el-form>
                          </span>

                     
                    </el-dialog>
        </div>         
  </div>
 
  <script>
      new Vue({
        el: '#app',
      data() {     
          return {
            tableData:[],//
            total:1,//分页的最大页数
            change:1,//点击分页的页数
            input:{// 这个是点击查询获得名称跟手机号码
              name:'',
              tel:''
            },
            dialogVisible:false,//修改对话框
            lookVisible:false,//查看对话框
            type:'',//列表里的类型的下拉
            status:'',//列表里的状态的下拉
            changboxid:'',//多选框装id使用停用单个
            changbox:[],//多选框装id使用停用多个
            temp:true,//开关使用跟停用
            changboxStatus:[],//多选框装status使用停用多个
            updateForm: {
                pid:'',
                type:'',
                name: '',
                tel: '',
                area:[],
                area_bh:[],
                address: '',
                bank_account: '',
                start: '',
                end: '',
                id:''
              },
              selectedOptions: [],
              options:[],
              pleader:'',
          }
        },
      methods: {
        //点击查看
        lookDis(scope){
          let that=this
          $.ajax({
              type:'get',
              url:`/supplier/show/${scope.row.id}`,
              dataType:'json',
              success:function(res){
            // console.log(res)
                  that.lookVisible=true
                  that.updateForm.pid=res.pid
                  that.updateForm.type=res.type
                  that.updateForm.name=res.name
                  that.updateForm.tel=res.tel
                  that.updateForm.area_bh.push(res.area_bh)
                  that.pleader=res.province+'/'+res.city+'/'+res.district
                  that.updateForm.address=res.address
                  that.updateForm.bank_account=res.bank_account
                  that.updateForm.start=res.start
                  that.updateForm.end=res.end
                  that.updateForm.id=res.id
              }
            }); 
           
        },
        //修改提交
        UpdataSubmit(){
          let that=this
          let arr=this.updateForm.area_bh
            if(arr.length==1){
             
               $.ajax({
                    type:'post',
                    url:`/supplier/update/${this.updateForm.id}`,
                    dataType:'json',
                    data:this.updateForm,
                    success:function(res){
                      that.dialogVisible=false
                      that.tabelPost();
                    }
                  });
            }else{
              
                for(var e in arr){ 
                }
                $.ajax({
                    type:'post',
                    url:`/supplier/update/${this.updateForm.id}`,
                    dataType:'json',
                    data:this.updateForm,
                    success:function(res){
                      that.dialogVisible=false
                      that.tabelPost();
                    }
                  });
            }
           
        },
        //三级联动
        handleChange(value) {
         const that=this;
            $.ajax({
              type:'get',
              url:'/clients/address'
            }).then(function(response){
               let data=response
               const options = [];
               for (let item in data) {

                let province = {
                        value: data[item].value,
                        label: data[item].label,
                        children: []
                    };
                    for (let city in data[item].children) {
                      let counties=[];
                      for (let county in data[item].children[city].children) {
                            let cityno=data[item].children[city].children[county];
                            counties.push({value:cityno.value,label:cityno.label});
                        }
                        province.children.push({
                            value: data[item].children[city].value,
                            label: data[item].children[city].label,
                            children:counties
                        });
                    }
                        options.push(province)
                  }
                  that.$data.options=options;
               })
      },
        handleClosea() {//修改对话框上面的x
          this.dialogVisible=false
        },
        handleClose() {//修改对话框上面的x
          this.lookVisible=false
        },
        //点击修改
        updataDis(scope){
          let that=this
         
           if(scope.row.status===1|| scope.row.status===11){
                $.ajax({
                    type:'get',
                    url:`/supplier/show/${scope.row.id}`,
                    dataType:'json',
                    success:function(res){
                  // console.log(res)
                       that.dialogVisible=true
                       that.updateForm.pid=res.pid
                       that.updateForm.type=res.type
                       that.updateForm.name=res.name
                       that.updateForm.tel=res.tel
                       that.updateForm.area_bh.push(res.area_bh)
                       that.pleader=res.province+'/'+res.city+'/'+res.district
                       that.updateForm.address=res.address
                       that.updateForm.bank_account=res.bank_account
                       that.updateForm.start=res.start
                       that.updateForm.end=res.end
                       that.updateForm.id=res.id
                    }
                  }); 
           }else{
            this.$notify.success({
                    title: '提示',
                    message: '已审核的内容不能再进行修改操作',
                });
           }
        },
        tabelPost(){
           let that=this
            $.ajax({
                    type:"get",
                    url:'/supplier/index',
                    data:{
                      current_page:this.change,
                      name:this.input.name,
                      tel:this.input.tel,
                      type:this.type,
                      status:this.status,
                    }
                  }).then(function(res){
                    console.log(res)
                    var opt=[];
                    let i=-10;
                    for(var e in res.content.data){
                      i++;
                      opt.push({
                        'loop':i+(10*that.change),
                       // 'jigou':res.content.data[e].pid,
                       'jigou':res.content.data[e].company.company_name,
                        'type':res.content.data[e].type,
                        'name':res.content.data[e].name,
                        'tel':res.content.data[e].tel,
                        'address':res.content.data[e].address,
                        'verify_user':res.content.data[e].supervisor,
                       //'verify_user':res.content.data[e].verify_user.admin_name,
                        'verified_at':res.content.data[e].verified_at,
                        'admin_a':res.content.data[e].loged_by.admin_name,
                        'created_at':res.content.data[e].created_at,
                        'status':res.content.data[e].status,
                        'id':res.content.data[e].id,
                        'contacts':res.content.data[e].contacts
                      
                      })
                    
                    }
                    console.log(222,opt)
                    that.total=res.content.total
                 
                    that.tableData=opt
                  
                })
             },
             actionPost(){
               let that=this
              $.ajax({
                    type:'post',
                    url:'/supplier/active',
                    dataType:'json',
                    data:{
                      id:this.changboxid
                    },
                    success:function(res){
                      that.tabelPost();
                    
                    }
                  })
             },
             //点击页数
             handleCurrentChange(val){
                this.change=val
                this.tabelPost(); 
             }, 
             //点击查询
             onGet(){
              this.tabelPost(); 
                
             },
             ////列表里的下拉菜单
             filterTag(val){
               console.log(val.status)
               this.type=val.type
               this.status=val.status

               this.tabelPost();
             },
             //这是多选框
             handleSelectionChange(val){
              this.changbox=[]
              this.changboxStatus=[]
                  for(var e in val){
                    this.changboxid=val[e].id
                    this.changbox.push(val[e].id)
                    this.changboxStatus.push(val[e].status)
                  }
              },
              //使用与停用请求
              deleteRow(e){
                //console.log(e)
                this.temp=!this.temp
                  if(this.changboxid==''){
                          this.$notify.error({
                              title: '提示',
                              message: "至少选择一项",
                          });
                          return false;
                      }
                  this.$confirm('你确定对这一项进行操作吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        if(this.temp==true){
                          e.target.text="使用"
                          this.actionPost();
                          this.changboxid=""
                        }else if(this.temp!=true){
                          e.target.text="停用"
                          this.actionPost();
                          this.changboxid=''
                        }
                        this.$message({
                          type: 'success',
                          message: '操作成功',
                        });
                      }).catch(() => {
                        this.$message({
                          type: 'info',
                          message: '取消操作',
                        });          
                      });
              },
              //审核
              audit(){
                let that=this
                 if(this.changbox==''){
                          this.$notify.error({
                              title: '提示',
                              message: '请选择需要审核的项',
                          });
                          return false;
                      }
                    if(this.changbox.length==1){
                       console.log(this.changboxStatus==2)
                        if(this.changboxStatus==1 || this.changboxStatus==11){
                            $.ajax({
                            type:'post',
                            url:'/supplier/verify',
                            data:{
                              ids:this.changbox
                            },
                            success:function(res){
                               //console.log(res)
                               that.tabelPost();
                               that.$notify.success({
                                    title: '提示',
                                    message: '审核提交成功',
                                });
                              
                              }
                            })
                        }else{
                            this.$notify.error({
                                title: '提示',
                                message: "已经审核的项不能再次进行审核",
                            });
                        }
                    } else{
                      for(var e in this.changboxStatus){
                          if(this.changboxStatus[e]==2 || this.changboxStatus[e]==12){
                            this.$notify({
                                title: '警告',
                                message: '你选的项中有已审核的项 已审核的项不能再次审核',
                                type: 'warning'
                              }); 
                          }else{
                                $.ajax({
                                type:'post',
                                url:'/supplier/verify',
                                data:{
                                  ids:this.changbox
                                },
                                success:function(res){
                                  //console.log(res)
                                  that.tabelPost();
                                  that.$notify.success({
                                        title: '提示',
                                        message: '审核提交成功',
                                    });
                                  
                                  }
                                })
                          }
                          break;
                      }
                    }     
              },
              //反审
              reverify(){
                let that=this
                  if(this.changbox==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请选择需要反审的项',
                        });
                        return false;
                    }
                    if(this.changbox.length==1){
                        if(this.changboxStatus==2 || this.changboxStatus==12){
                              $.ajax({
                              type:'post',
                              url:'/supplier/verify',
                              data:{
                                ids:this.changbox
                              },
                              success:function(res){
                               //console.log(res)
                               that.tabelPost();
                               that.$notify.success({
                                      title: '提示',
                                      message: '反审提交成功',
                                  });
                                
                                }
                              })
                            
                          }else{
                              this.$notify.error({
                                  title: '提示',
                                  message: "未审核的项不能再次进行反核",
                              });
                          }
                    }else{
                      for(var e in this.changboxStatus){
                          if(this.changboxStatus[e]==1 || this.changboxStatus[e]==11){
                            this.$notify({
                                title: '警告',
                                message: '你选的项中有未审核的项 未审核的项不能进行反审',
                                type: 'warning'
                              }); 
                          }else{
                                $.ajax({
                                type:'post',
                                url:'/supplier/verify',
                                data:{
                                  ids:this.changbox
                                },
                                success:function(res){
                                  //console.log(res)
                                  that.tabelPost();
                                  that.$notify.success({
                                        title: '提示',
                                        message: '反审提交成功',
                                    });
                                  
                                  }
                                })
                          }
                          break;
                      }
                    }  
              },
               //导出
            expost(){
                  if(this.changbox==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请选择需要导出的项',
                        });
                        return false;
                    }
            },
             //新增跳转
              added(){
                window.location.href = "/supplier/create";
              },
            
        },
       created(){
           this.tabelPost();
         }
      })
  </script>
@endsection